//  内容部分的文字说明
@mixin text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .size43 {
        color: #0395ff;
        font-size: 43px;
        font-family: 微软雅黑;
        line-height: 99px;
        white-space: nowrap;
    }
    .size25 {
        line-height: 45px;
        color: #5c636b;
        font-size: 25px;
        font-family: 微软雅黑;
        white-space: nowrap;
    }
}

header {
    width: 100%;
    height: 74px;
    //  导航区域
    nav {
        width: 1120px;
        height: 74px;
        margin: 0 auto;
        //  logo区域
        .f-l {
            width: 445px;
            float: left;
        }
        //  导航链接区域
        .f-r {
            float: right;
            a {
                height: 74px;
                padding: 0 25px;
                line-height: 74px;
                color: #4f4f4f;
                font-size: 18px;
                font-family: 微软雅黑;
                display: inline-block;
            }
            .active {
                color: #1188ff;
                text-decoration: underline;
            }
            .menu-item {
                .qr-phone {
                    width: 18px;
                    height: 28px;
                    background: url(../img/手机图标.png);
                    display: inline-block;
                    margin-right: 5px;
                    position: relative;
                    top: 7px;
                }
                .arrow-down {
                    width: 12px;
                    height: 7px;
                    background: url(../img/展开图标.png);
                    background-origin: padding-box;
                    display: inline-block;
                    margin-left: 5px;
                }
                span {
                    display: inline-block;
                }
            }
        }
    }
    //  二维码弹框
    .qr-box{
        width: 262px;
        height: 132px;
        background: #FFFFFF;
        border: 1px solid #73B9FF;
        position: absolute;
        top: 60px;
        display: none;
        .qr{
            width: 50%;
            height: 100%;
            float: left;
            img{
                width: 100px;
                height: 100px;
                display: block;
                margin: 0 auto;
            }
            .text{
                text-align: center;
                color: #73B9FF;
            }
        }
    }
}

.content {
    //  第一部分内容
    .bg-cfff:nth-of-type(1) {
        width: 100%;
        height: 640px;
        background-color: #2d96ff;
        background-image: url(../img/360贷款导航背景1.jpg);
        background-position: 50% 0;
        //  二维码和下载链接
        .w1000px {
            width: 1000px;
            height: 150px;
            position: relative;
            top: 320px;
            margin: 0 auto;
            .qr {
                width: 190px;
                height: 150px;
                position: absolute;
                left: 0;
                img {
                    width: 150px;
                    height: 150px;
                }
            }
            .download-btn {
                width: 224px;
                height: 150px;
                position: absolute;
                left: 190px;
                .android {
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
    //  第二部分内容
    .bg-cfff:nth-of-type(2) {
        width: 100%;
        height: 540px;
        background: #ffffff;
        .w1000px {
            width: 1000px;
            margin: 0 auto;
            img {
                float: left;
            }
            .text {
                width: 500px;
                height: 540px;
                float: right;
                position: relative;
                .text-box {
                    @include text-box;
                }
            }
        }
    }
    //  第三部分内容
    .bg-cfff:nth-of-type(3) {
        width: 100%;
        height: 533px;
        background: #f0f7ff;
        .w1000px {
            width: 1000px;
            margin: 0 auto;
            .text {
                width: 500px;
                height: 533px;
                float: left;
                position: relative;
                .text-box {
                    @include text-box;
                }
            }
            img {
                float: right;
            }
        }
    }
    //  第四部分内容
    .bg-cfff:nth-of-type(4) {
        width: 100%;
        height: 517px;
        .w1000px{
            width: 1000px;
            margin: 0 auto;
            img{
                float: left;
            }
            .text{
                width: 500px;
                height: 517px;
                float: right;
                position: relative;
                .text-box{
                    @include text-box;
                }
            }
        }
    }
}

footer{
    width: 100%;
    height: 201px;
    background: #3B3F4F;
    .w1120px{
        width: 1120px;
        margin: 0 auto;
        .box{
            padding: 20px 10px;
            //  二维码区域
            .f-l{
                width: 284px;
                float: left;
                padding-right: 10px;
                .qr{
                    width: 132px;
                    height: 161px;
                    float: left;
                    background: #ffffff;
                    img{
                        width: 132px;
                        height: 132px;
                    }
                    .text{
                        font-size: 14px;
                        text-align: center;
                    }
                }
                .qr:nth-of-type(1){
                    margin-right: 20px;
                }
            }
            //  企业信息区域
            .f-r{
                widows: 781px;
                padding: 10px 0 10px 20px;
                float: left;
                .info:nth-of-type(1){
                    margin-bottom: 10px;
                    color: #ffffff;
                    span{
                        font-size: 16px;
                        margin-right: 30px;
                    }
                    a{
                        color: #ffffff;
                    }
                }
                .info:nth-of-type(2){
                    color: #B8B9BB;
                    font-size: 14px;
                    margin-bottom: 20px;
                    a{
                        color: #B8B9BB;
                    }
                }
            }
        }
    }
}